<!DOCTYPE HTML>
<html>

{% load my_filter %}

<head>
	<title>Question Detail</title>
	{% include 'includes.inc' %}
	<style type="text/css">
		@import "{{STATIC_URL}}css/demo_page.css";
		@import "{{STATIC_URL}}css/demo_table.css";
		.control {
			margin-bottom: 1em;
		}
		.control_label {
			margin: 0 70px 0 5px;
		}
		#testcase_pane {
			overflow: hidden;
			margin-bottom: 2em;
		}
		.form_settings #copy_testcase_id {
			width: 50px; 
		}
		#copy_testcase{
			margin-right: 100px;
		}
		.form_settings span.t_answer_label {
			float: none;
			width: auto;
		}
		#t_provide_answer {
			width: auto;
		}
		.t_error {
			color: #DD0000;
		}
		#solution_div {
			overflow: hidden;
		}

	</style>
	<script src="{{STATIC_URL}}js/jquery.dataTables.js"></script>
	<script src="{{STATIC_URL}}jquery.json-2.3.min.js"></script>
	<script>
		$(document).ready(function() {

			var SIGNATURE = {{ signature|tojsonstring }};
			var RETURN_TYPE = '{{ question.return_type|safe }}';
			var QUESTION_ID = {{ question.id }};
			var testcaseTable = new TestcaseTable(getDataTableConfig(), 'for_edit');
			var solutions = {{ solutions|safe }};

			$("#collapse").collapse({
				query: '> h1'
			});

			// Solutions
			initializeSolutionTable(solutions);

			// Testcases
			$('#add_testcase_form').dialog({
				autoOpen: false,
				width: 500,
				show: "blind",
            hide: "blind"
			})
			.parent()
			.draggable({cancel:'input,textarea',handle:''});

			$(".ui-dialog-titlebar").hide();
			
			$('#open_add_dialog').click(function(){
				$('#add_testcase_form').dialog("open");
			});
			$('#close_add_dialog').click(function(){
				$('#add_testcase_form').dialog("close");
			});

			$('#add_testcase').click(function(){
				var testcase = validateAndAddTestcase();
				if(testcase !== false) {
					$.ajax({
						contentType: "application/json; charset=utf-8",
						data: $.toJSON(testcase),
						dataType: 'json',
						type: 'POST',
						url: '/t/UpdateTestcase',
						beforeSend: function() {
							$('#loading').fadeIn('slow');
						},
						success: handleSuccess,
						error: function(xhr, textStatus, errorThrown) {
							alert(textStatus);
							$('#loading').fadeOut('slow');
						}
					});
				}
			});

			$('#t_provide_answer').click(function(){
				if($(this).is(':checked')){
					$('#t_return').attr('disabled', false);
				} else {
					$('#t_return').attr('disabled', true);
				}
			});

			function handleSuccess(data, textStatus, xhr){
				if(data.result == 'OK'){
					$('#loading').fadeOut('slow');
					$('#testcase_table').dataTable().fnAddData(data.row);
					$('#add_testcase_form').dialog("close");
				} else {
					alert(data.message);
					$('#loading').fadeOut('slow');
				}
			}

			function validateAndAddTestcase(){
				var testcase = {question_id: QUESTION_ID};
				testcase.entry = {};
				var isValid = true;
				for(var i = 0; i < SIGNATURE.length; i ++){
					var type = SIGNATURE[i][0];
					var name = SIGNATURE[i][1];
					var val = $('#t_' + name).val();
					try{
						testcase.entry[name] = validate_wrapper(type,val);
						$('#t_' + name).removeClass('t_error');
					} catch (e) {
						isValid = false;
						$('#t_' + name).addClass('t_error');
					}
				}

				testcase.answer_provided = $('#t_provide_answer').is(':checked');

				if(testcase.answer_provided){
					var val = $('#t_return').val();
					var type = RETURN_TYPE;
					try{
						testcase['answer'] = validate_wrapper(type,val);
						$('#t_return').removeClass('t_error');
					} catch (e) {
						isValid = false;
						$('#t_return').addClass('t_error');
					}
				}
				return isValid ? testcase : false;
			}

			function validate_wrapper(type, val){
				if(type.substring(type.length-2) == '[]'){
					val = $.parseJSON(val);
					if(typeof val != 'object'){
						throw val;
					}
				}
				return validate(type, val);
			}

			function validate(type, val){
				if(type == 'Integer'){
					var rslt = parseInt(val, 10);
					if(isNaN(rslt) || rslt != parseFloat(val)){
						throw val;
					}
					return rslt;
				}

				if(type == 'Boolean'){
					if(typeof val == 'boolean'){
						return val;
					}
					var rslt = val.toLowerCase();
					if(rslt == 't' || rslt == 'true'){
						return true;
					} else if(rslt == 'f' || rslt == 'false'){
						return false;
					} else {
						throw val;
					}
				}

				if(type == 'Double'){
					var rslt = parseFloat(val);
					if(isNaN(rslt)){
						throw val;
					}
					return rslt;
				}

				if(type == 'String'){
					return '' + val;
				}

				if(type.substring(type.length-2) != '[]'){
					throw 'Unexpected type: ' + type;
				}

				var currentType = type.substring(0, type.length-2);
				for(var i = 0; i < val.length; i++){
					val[i] = validate(currentType, val[i]);
				}
				return val;
			}// function validate

			function getDataTableConfig(){
				return config = {
					"bPaginate": false,
					"bLengthChange": false,
					"bFilter": false,
					"bSort": false,
					"bInfo": false,
					"bAutoWidth": false,
					"aaData": {{ aaData|safe }},
					"aoColumns": {{ aoColumns|safe }}
				};
			}// function getDataTableConfig


			function initializeSolutionTable(solutions){
				var aoColumns = [
					{ "sTitle": "ID" },
					{ "sTitle": "Name" },
					{ "sTitle": "Lang" },
					/*{ "sTitle": "Author" },*/
					{ "sTitle": "Last Update" }
				];
				var config = {
					"bPaginate": true,
					"bLengthChange": false,
					"bFilter": true,
					"bSort": true,
					"bInfo": false,
					"bAutoWidth": false,
					"aaData": [],
					"aoColumns": aoColumns
				};
				
				for(var s_id in solutions){
					config.aaData.push([
						solutions[s_id].sol_id,
						solutions[s_id].name,
						solutions[s_id].lang,
						tm(solutions[s_id].last_update)
					]);
				}      
				
				solutionTable = $('#solution_table').dataTable(config);
				solutionTable.fnSetColumnVis(0, false);
				solutionTable.$('tr').click( function () {
					var sData = solutionTable.fnGetData( this );
					var s_id = sData[0];
					var myUrl = '/t/add-solution?q_id=' + QUESTION_ID + '&'
						+ "sol_id=" + s_id ;
					window.location.href = myUrl;
				});

			
			}// function initializeSolutionTable(solutions)


		});
	</script>
</head>

<body>
	<div id="main">

	{% include 'header.inc' %}

    <div id="site_content">
		{% include 'sidebar.inc' %}

      <div id="content">

{% include 'problem-description.inc' %}

<div id='collapse'>
<h1>Testcases</h1>
<div id="testcase_pane">
	<div class="control">
		<input class="checkbox" type="checkbox" name="hide_author" id="hide_author" value="hide_author">
		<span class="control_label">Hide Author Info</span>
		<input class="checkbox" type="checkbox" name="hide_date" id="hide_date" value="hide_date">
		<span class="control_label">Hide Date Info</span>
		<input type="button" class="fancy_button" name="open_add_dialog" id="open_add_dialog" value="Add Testcase">
	</div>
	<div id="testcase_table_pane">
		<table class="display" cellpadding="0" cellspacing="0" border="0" id="testcase_table"></table>
	</div>	
</div>

<div id="add_testcase_form" title="Add New Testcase" class="form_settings">
	<h3>Add New Testcase!</h3>
	<form>
		{{ formStr|safe }}
		<p>
			<input type="text" name="copy_testcase_id" id="copy_testcase_id">
			<input type="button" class="fancy_button" name="copy_testcase" id="copy_testcase" value="Copy">
			<input type="button" class="fancy_button" name="add_testcase" id="add_testcase" value="Add">
			<input type="button" class="fancy_button" name="close_add_dialog" id="close_add_dialog" value="Close">
		</p>
	</form>
	<div class="loading" id="loading"></div>
</div>

<h1>Solutions</h1>
	<div id="solution_div">
		<table class="display" cellpadding="0" cellspacing="0" border="0" id="solution_table"></table>
	</div>
</div><!-- close data-collapse div -->

      </div><!-- close content div -->
    </div><!-- close site_content div -->

	{% include 'footer.inc' %}
  </div>

</body>
</html>
